<template>
    <div class="app-container">
          <levelbar></levelbar>
        <div class="content">
          <div class="top-title">添加文章</div>
            <el-form v-loading="loading" :rules="rules" :model="dataForm" ref="dataForm" label-width="60px" class="form" >
                <span class="title">标题与封面</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="标题" prop="title">
                      <el-popover placement="top-start" trigger="focus" content="请输入 1 到 28 个字">
                          <el-input :maxlength="28" slot="reference" v-model="dataForm.title"></el-input>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <div class="describe mr"><font color='red'>* </font>封面<i>(图片大小300 * 200, 支持 JPG JPEG PNG GIF 格式，100K以内的图片！)</i></div>
                    <!-- 判断是否为查看还是编辑还是添加 -->
                    <div class="mr">
                        <el-form-item label-width="0">
                            <fileUpload @onSuccess="btnAdvImg" @remove="fileFileRemove" :file-list-show.sync='AdvImg' :file-list.sync="arrList" :imgSize='0.09765625'>
                                <div class="el-upload-new el-upload-picture-new">
                                <div class="up-container el-upload">
                                    <i class="el-icon-plus"></i>
                                </div>
                                </div>
                            </fileUpload>
                        </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <span class="title">文章摘要</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="摘要" prop="abstract">
                      <el-popover placement="top-start" trigger="focus" content="请输入 1 到 20 个字">
                          <el-input :maxlength="20" slot="reference" v-model="dataForm.abstract"></el-input>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">文章内容</span>
                <el-row :gutter="41">
                  <el-col :span="21">
                    <el-radio class="radio mr" v-model="dataForm.showType" label="0">链接</el-radio>
                    <el-radio class="radio mr" v-model="dataForm.showType" label="1">自定义</el-radio>
                    <div class="box mr" v-if="dataForm.showType === '0'">
                        <el-form-item label-width="0" prop="link">
                            <el-popover  placement="top-start" trigger="focus" content="请输入http://或https://前缀链接">
                                <el-input slot="reference" :maxlength="10000" v-model="dataForm.link" placeholder="请输入链接" style="width:46%"></el-input>
                            </el-popover>
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item>
                          <div class="mr">
                            <Tinymce :id="tinymceId" :height="260" ref="dataForm.content" v-model="dataForm.html"></Tinymce>
                          </div>
                            
                        </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <div class="man-bom"></div>
                <el-row :gutter="41" type="flex" justify="center">
                  <el-col :span="2">
                    <el-button @click="cancel">取消</el-button>
                  </el-col>
                  <el-col :span="2">
                    <el-button @click="addAdv('dataForm')" type="primary">新增</el-button>
                  </el-col>
                </el-row>
                <div class="man-bom"></div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from "../../layout/Levelbar";
import fileUpload from "components/Upload/fileUpload";
import Tinymce from "components/Tinymce";
import { insertHeadLine } from "api/newTope";
import { mapGetters } from "vuex";
export default {
  name: "addNewsTope",
  components: { Levelbar, fileUpload, Tinymce },
  data() {
    return {
      AdvImg: true,
      dataForm: {
        advertPic: "",
        showType: "0",
        title: "",
        link: "",
        html: "",
        abstract:""
      },
      tinymceId: "tinymceId",
      // 置顶位置
      arrList: [],
      loading: false,
      // 验证规则
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 1,
            max: 28,
            message: "长度为 1 到 28 个字",
            trigger: "blur"
          },
          { pattern: /^[^ ]+$/, message: "请勿输入空格" }
        ],
        abstract:[
          { required: true, message: "请输入摘要", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度为 1 到 20 个字",
            trigger: "blur"
          },
          { pattern: /^[^ ]+$/, message: "请勿输入空格" }
        ],
        link: [
          { required: true, message: "请输入链接", trigger: "blur" },
          {
            pattern: /^(https?):\/\/\w*\.\w*/,
            message:
              "请填写完整的链接，链接需以'http://'或者'https://'开头"
          }
        ]
      }
    };
  },
  created() {},
  computed: {
    // roleType 1 自定义角色  2 管理员  3 运营专用（其实与2相同，区分开来）
    ...mapGetters(["roleType"])
  },
  methods: {
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    btnAdvImg(obj) {
      // console.log(obj);
      this.dataForm.advertPic = `${obj.imgUrl}?imageView2/2/w/300/h/200`;
    },
    fileFileRemove() {
      this.dataForm.advertPic = "";
    },
    // 新增文章

    addAdv(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dataForm.advertPic === "") {
            this.$message("请上传图片");
            return false;
          }

          if (this.dataForm.showType === "1") {
            var tinyContent = window.tinymce.activeEditor.getContent();
            var htmlReg = /<img[^>]+>|<video[^>]+>/g;
            if (
              window.tinymce.activeEditor.getContent({ format: "text" }).trim()
                .length < 1 &&
              !tinyContent.match(htmlReg)
            ) {
              this.$message.error("请填写编辑内容");
              return false;
            }

            //判断是否有多个video
            
            var n=(tinyContent.split('<video')).length-1;
            if(n >= 2){
              this.$message.error("只能添加一个视频~");
              return false;
            }
            
            if (
              window.tinymce
                .get("tinymceId")
                .getContent({ format: "text" })
                .trim().length > 6000
            ) {
              this.$message.error("自定义内容字数过多");
              return false;
            }
          }

          this.$confirm("确认提交?", " ", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: " "
          })
            .then(() => {
              insertHeadLine(
                this.dataForm.title,
                this.dataForm.advertPic,
                this.dataForm.link,
                this.dataForm.showType,
                this.dataForm.html,
                this.dataForm.abstract
              )
                .then(data => {
                  this.loading = false;
                  this.$store.dispatch("UpdateCache", true);
                  this.$router.push({ path: "/newsTope" });
                  this.$message({
                    message: "添加成功！",
                    type: "success"
                  });
                })
                .catch(Error => {
                  this.loading = false;
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.top-title {
  text-align: center;
  font-size: 18px;
  color: #333;
  height: 72px;
  line-height: 72px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}
.man-bom {
  margin: 20px 0;
}
.box {
  margin: 20px 0;
}
.title {
  position: relative;
  font-size: 14px;
  color: rgb(106, 85, 72);
  padding-left: 14px;
  margin: 30px 0;
  display: block;
  &::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: 0;
    top: 3px;
  }
}
.describe {
  font-size: 14px;
  color: #666;
  margin: 20px 0;
}
i {
  font-style: normal;
  color: #999;
}
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  overflow: hidden;
  .content {
    position: relative;
    padding: 8px 50px 10px;
    background: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    .title {
      position: relative;
      font-size: 14px;
      color: rgb(106, 85, 72);
      padding-left: 14px;
      margin: 30px 0;
      display: block;
      &::after {
        position: absolute;
        content: "";
        width: 4px;
        height: 14px;
        background: #ff5e2c;
        left: 0;
        top: 4px;
      }
    }
  }
}
.mr {
  margin-left: 10px;
}
</style>